<!DOCTYPE html>
<html lang="en">

<head>
  {include file="common/meta" /}
  <style>
    #img {
      width: 100px;
    }
  </style>
</head>

<body>
  <div class="x-body">
    <xblock>
      <button class="layui-btn layui-btn-danger" onclick="back()">
        返回
      </button>
    </xblock>

    <div class="layui-form layui-form-pane layui-tab-item layui-show">
      <form method="post">

        <div class="layui-form-item">
          <label for="L_nowpass" class="layui-form-label">当前密码</label>
          <div class="layui-input-inline">
            <input type="password" id="L_nowpass" name="nowpass" required lay-verify="required" autocomplete="off"
              class="layui-input">
          </div>
          <span id="oldpass_txt" style="line-height: 38px;"></span>
        </div>
        <div class="layui-form-item">
          <label for="L_pass" class="layui-form-label">新密码</label>
          <div class="layui-input-inline">
            <input type="password" id="L_pass" name="pass" required lay-verify="required" autocomplete="off"
              class="layui-input">
          </div>
          <span id="newpass_txt" style="line-height: 38px;"></span>
        </div>
        <div class="layui-form-item">
          <label for="L_repass" class="layui-form-label">确认密码</label>
          <div class="layui-input-inline">
            <input type="password" id="L_repass" name="repass" required lay-verify="required" autocomplete="off"
              class="layui-input">
          </div>
          <span id="repass_txt" style="line-height: 38px;"></span>
        </div>
        <div class="layui-form-item">
          <button class="layui-btn" key="set-mine" id="passbtn" type="submit">确认修改</button>
        </div>

      </form>
    </div>

  </div>
</body>

<script>


  function back() {
    window.location.href = "{:url('admin/user/index')}"
  }

  layui.use(['layer', 'jquery', 'form'], function () {
    var layer = layui.layer
    var form = layui.form
    var $ = layui.jquery

    // 检查密码是否正确
    $("#L_nowpass").on("change", function () {
      var oldpass = $(this).val();

      $.ajax({
        type: "POST",
        url: `{:url('admin/user/check')}`,
        data: {
          oldpass: oldpass,
          userid: `{$userId}`,
        },
        success: function (data) {
          data = JSON.parse(data);
          if (data["result"]) {
            $("#oldpass_txt").html(data["msg"]).css({
              color: "green",
            })
            $("#passbtn").attr("disabled", false);
          } else {
            $("#oldpass_txt").html(data["msg"]).css({
              color: "red",
            });
            $("#passbtn").attr("disabled", true);
          }
        }
      })
    })

    // 检查新密码是否正确
    $("#L_pass").on("change", function () {
      var newpass = $(this).val();

      $.ajax({
        type: "POST",
        url: `{:url('admin/user/check')}`,
        data: {
          newpass: newpass,
          userid: `{$userId}`,
        },
        success: function (data) {
          data = JSON.parse(data);
          if (data["result"]) {
            $("#newpass_txt").html(data["msg"]).css({
              color: "green",
            })
            $("#passbtn").attr("disabled", false);
          } else {
            $("#newpass_txt").html(data["msg"]).css({
              color: "red",
            });
            $("#passbtn").attr("disabled", true);
          }
        }
      })
    })

    // 检查新密码与确认密码是否一样
    $("#L_repass").on("change", function () {
      var repass = $(this).val();
      var newpass = $("#L_pass").val();

      if (repass == newpass) {
        $("#repass_txt").html("密码一致！继续操作！").css({
          color: "green",
        })
        $("#passbtn").attr("disabled", false);
      } else {
        $("#repass_txt").html("密码不一致！请重新输入！").css({
          color: "red",
        });
        $("#passbtn").attr("disabled", true);
      }
    })


  })
</script>

</html>